<template>
  <div class="task-con">
    <div class="top-tab">
      <a-tabs v-model:active-key="activeTab" @change="tabChange" size="mini">
        <a-tab-pane v-for="item in tabList" :key="item.key">
          <template #title>
            <span>{{ item.label }}</span>
            <span v-if="item.key">({{ item.num ? item.num : '0' }})</span>
          </template>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="table-bottom table-gl-w">
      <div class="search-w">
        <FilterTable :filterItem="filterItem" :max-num="6" :isReset="true" @search="searchByVal" />
      </div>
      <div class="table-gl-con">
        <TableWrap style="flex: 1" @refresh="getList">
          <template #headerLeft>
            <a-space>
              <a-button class="gray-outline" @click="setTag('mul')">设置标签</a-button>
              <a-button class="gray-outline" @click="batch" v-if="activeTab == '20'">批量拒接单</a-button>
              <a-button class="gray-outline" @click="btnHandleClickSubmitFactory" v-if="activeTab == '40'">提交工厂</a-button>
              <a-button class="gray-outline" v-if="activeTab == '80'" @click="batchSign">批量签收</a-button>
              <a-button class="gray-outline" v-if="['20', '40', '50', '60', '70,90', '80', '100'].includes(activeTab)" @click="batchSetPurchaseUser">设置采购员</a-button>
              <a-checkbox @change="onCheckAllChange" v-model="checkAll">全选</a-checkbox>
            </a-space>
          </template>

          <template #headerRight>
            <a-popover>
              <span @click="print" style="font-size: 20px" class="icon icon-dayin-dayinji cursor"></span>
              <template #content>打印</template>
            </a-popover>
          </template>

          <template #tableBody>
            <a-scrollbar v-if="tableList.length > 0" style="height: 100%; overflow: auto" v-loading="tableLoading">
              <a-checkbox-group v-model="ids">
                <div class="item-container clearfix">
                  <div class="item fl" v-for="(item, index) of tableList" :key="index">
                    <div class="bill-con">
                      <div class="flex">
                        <div class="fl-img">
                          <a-image @click="showBigImg(item)" :preview="false" :src="$extract(getPicList(item)[0], 'url')" width="200" height="200" />
                          <div class="tag-container" style="height: 50px">
                            <a-space wrap>
                              <div class="tag-item" v-for="(tag, index) of item.tagList" :style="{ background: tag.color }" :key="index">{{ tag.name }}</div>
                              <div class="icon-tag cursor" @click="setTag('single', item)"><icon-edit /></div>
                            </a-space>
                          </div>
                        </div>
                        <div class="fr-info">
                          <div>
                            <a-space class="title-con">
                              <p class="highlight cursor" @click="toDetail(item)">{{ item.platformOrderNumber }}</p>
                              <CopyText class="my-copy-class" :val="item.platformOrderNumber"></CopyText>
                            </a-space>
                          </div>
                          <div>
                            <span class="common-text">定制编号：</span>
                            <span>{{ item.customCode }}</span>
                          </div>
                          <div>
                            <span class="common-text">销售公司：</span>
                            <span>{{ item.companyName }}</span>
                          </div>
                          <div>
                            <span class="common-text">销售员：</span>
                            <span>{{ $extract(item, 'saler.name') }}</span>
                          </div>
                          <div>
                            <span class="common-text">采购员：</span>
                            <span>{{ $extract(item, 'purchaser.name') || '--' }}</span>
                          </div>
                          <div>
                            <span class="common-text">供应商：</span>
                            <span>{{ $extract(item, 'supplierCompany.supplierCode') || '--' }}</span>
                          </div>
                          <div>
                            <span class="common-text">定制类型：</span>
                            <span>{{ $extract(item, 'customInfo.customType') }}</span>
                          </div>
                          <div>
                            <span class="common-text">数量：</span>
                            <span>{{ item.qtyPurchase }}</span>
                          </div>
                          <div>
                            <span class="common-text">状态：</span>
                            <span>{{ filterStatus(item.status) }}</span>
                          </div>

                          <div style="color: #f59a63; height: 14px">
                            <span class="common-text" v-if="item.supplierTakeRejectReason">
                              <icon-exclamation-circle style="color: #f59a63; font-size: 14px" />
                            </span>
                            <span>{{ item.supplierTakeRejectReason }}</span>
                          </div>

                          <div class="mt10" style="min-height: 25px">
                            <a-space wrap>
                              <a-tag v-if="['20'].includes(item.status)" class="tag-btn mb5 ml5 gray-outline cursor" size="small" @click="showModal('showTakeOrRejectOrderModal', item)">接/拒单</a-tag>
                              <a-tag v-if="['40', '60'].includes(item.status)" class="tag-btn mb5 ml5 gray-outline cursor" size="small" @click="showModal('showSubmitFactoryModal', item)">提交工厂</a-tag>
                              <a-tag v-if="['40'].includes(item.status)" class="tag-btn mb5 ml5 gray-outline cursor" size="small" @click="cancelTakeOrder(item)">取消接单</a-tag>
                              <a-tag v-if="['50', '60'].includes(item.status)" class="tag-btn mb5 ml5 gray-outline cursor" size="small" @click="backToPendingOrder(item)">撤回至待下单</a-tag>
                              <a-tag v-if="['70', '90'].includes(item.status) && isNoSupper(item)" class="tag-btn mb5 ml5 gray-outline cursor" size="small" @click="showModal('showDeliverGoodsModal', item)">代交货</a-tag>
                              <signForAndReject v-if="['80'].includes(item.status)" :info="item" type="signFor" @save="saveAndReset" />
                              <signForAndReject v-if="['80'].includes(item.status)" :info="item" type="reject" @save="saveAndReset" />
                              <a-tag v-if="['100', '120'].includes(item.status)" class="tag-btn mb5 ml5 gray-outline cursor" size="small" @click="showModal('showSubmitToWarehouseModal', item)">提交仓库</a-tag>
                            </a-space>
                          </div>

                          <div class="footer-info-con clearfix">
                            <div class="fl highlight">
                              <span v-if="$extract(item, 'supplierCloseCost.semiWarehouseCode') && $extract(item, 'supplierCloseCost.semiWarehouseCode') != '无需领料'">半成品库存：{{ item.SemiGoodsInventory }}</span>
                            </div>
                            <div class="fr mr10 my-popover-container">
                              <a-space>
                                <a-popover trigger="click" width="400px">
                                  <div class="icon icon-jurassic_log highlight"></div>
                                  <template #content>
                                    <div class="img-con">
                                      <a-image-preview-group infinite>
                                        <a-space wrap>
                                          <a-image width="40" height="40" :src="imgObj.url" v-for="(imgObj, index) of getPicList(item)" :key="index"></a-image>
                                        </a-space>
                                      </a-image-preview-group>
                                    </div>
                                    <div class="custom-basic-info flex">
                                      <div class="label">定制类型：</div>
                                      <div class="value">{{ $extract(item, 'customInfo.customType') }}</div>
                                    </div>
                                    <div class="custom-basic-info flex">
                                      <div class="label">材质：</div>
                                      <div class="value">{{ $extract(item, 'customInfo.material') }}</div>
                                    </div>
                                    <div class="custom-basic-info flex">
                                      <div class="label">刻字内容：</div>
                                      <div class="value">{{ $extract(item, 'customInfo.fontTxt') }}</div>
                                    </div>
                                    <div class="custom-basic-info flex">
                                      <div class="label">字体：</div>
                                      <div class="value">{{ $extract(item, 'customInfo.fontFamily') }}</div>
                                    </div>
                                    <div class="custom-basic-info flex">
                                      <div class="label">电镀颜色：</div>
                                      <div class="value">{{ $extract(item, 'customInfo.platinColor') }}</div>
                                    </div>
                                    <div class="custom-basic-info flex">
                                      <div class="label">戒指尺码：</div>
                                      <div class="value">{{ $extract(item, 'customInfo.ringSize') }}</div>
                                    </div>
                                    <div class="custom-basic-info flex">
                                      <div class="label">石头：</div>
                                      <div class="value">{{ $extract(item, 'customInfo.stone') }}</div>
                                    </div>
                                    <div class="custom-basic-info flex">
                                      <div class="label">链条：</div>
                                      <div class="value">{{ getfittingName(item) }}</div>
                                    </div>
                                    <div class="custom-basic-info flex">
                                      <div class="label">字印：</div>
                                      <div class="value">{{ $extract(item, 'customInfo.fontPrint') }}</div>
                                    </div>
                                    <div class="custom-basic-info flex">
                                      <div class="label">备注：</div>
                                      <div class="value">{{ $extract(item, 'customInfo.remark') }}</div>
                                    </div>
                                  </template>
                                </a-popover>
                                <a-popover trigger="click">
                                  <div class="icon icon-rili highlight"></div>
                                  <template #content>
                                    <div class="custom-basic-info flex">
                                      <div class="label" style="width: 100px">期望交货日期：</div>
                                      <div class="value">{{ $setTime(item.gmtExpectDelivery, 'YYYY-MM-DD') }}</div>
                                    </div>
                                    <div class="custom-basic-info flex">
                                      <div class="label" style="width: 100px">提交时间：</div>
                                      <div class="value">{{ $setTime(item.gmtSubmitPurchase, 'YYYY-MM-DD') }}</div>
                                    </div>
                                    <div class="custom-basic-info flex">
                                      <div class="label" style="width: 100px">接单时间：</div>
                                      <div class="value">{{ $setTime(item.gmtPurchaseTake, 'YYYY-MM-DD') }}</div>
                                    </div>
                                    <div class="custom-basic-info flex">
                                      <div class="label" style="width: 100px">签收时间：</div>
                                      <div class="value">{{ $setTime(item.gmtWarehouseReceive, 'YYYY-MM-DD') }}</div>
                                    </div>
                                  </template>
                                </a-popover>
                              </a-space>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="checkbox-con"> <a-checkbox :value="item.id"></a-checkbox></div>
                  </div>
                </div>
              </a-checkbox-group>
            </a-scrollbar>

            <a-empty style="margin-top: 50px" v-else></a-empty>
          </template>
        </TableWrap>
        <div class="pagination-footer">
          <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
        </div>
      </div>
    </div>
  </div>
  <a-image-preview-group v-model:visible="visible" infinite :srcList="srcList" />
  <!-- 拒接单 -->
  <takeOrRejectOrder v-if="showTakeOrRejectOrderModal" :getfittingName="getfittingName" v-model="showTakeOrRejectOrderModal" :info="info" @save="saveAndReset" />
  <!-- 提交工厂 -->
  <submitFactory v-if="showSubmitFactoryModal" :getPicList="getPicList" v-model="showSubmitFactoryModal" :list="submitFactoryList" @save="saveAndReset" />
  <!-- 批量拒接单 -->
  <batchTakeOrderOrReject v-if="showBatchTakeOrderOrReject" v-model="showBatchTakeOrderOrReject" :ids="ids" @save="saveAndReset" />
  <!-- 代交货 -->
  <deliverGoods v-if="showDeliverGoodsModal" :getfittingName="getfittingName" :getPicList="getPicList" v-model="showDeliverGoodsModal" :info="info" @save="saveAndReset" />
  <!-- 提交仓库 -->
  <submitToWarehouse v-if="showSubmitToWarehouseModal" :getfittingName="getfittingName" :getPicList="getPicList" v-model="showSubmitToWarehouseModal" :list="selectList" @save="saveAndReset" />
  <!-- 定制单详情 -->
  <customOrderDetail v-if="showCustomOrderDetailModal" :getfittingName="getfittingName" type="purchase" :getPicList="getPicList" v-model="showCustomOrderDetailModal" :info="info" @save="saveAndReset" />
  <!-- 批量设置销售员 -->
  <batchSetPurchaseSaleman v-if="showBatchSetPurchaseSalemanModal" v-model="showBatchSetPurchaseSalemanModal" :ids="ids" @save="saveAndReset" />
  <!-- 标签 -->
  <tag ref="Tag" :dataList="editShowTagList" :idList="ids" @save="tagSave" />
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  import { getOrganizesUser } from '@/api/system'
  import { customType, statusList } from '../map'
  import { pageCustomOrderPurchase, findSupperList, batchRollbackToWaitAccept, batchRollbackToTaked, countCustomOrderPurchaseByStatus, queryInventory } from '@/api/purchase'
  import { Modal, Message } from '@arco-design/web-vue'
  import { useRoute, useRouter } from 'vue-router'
  import _ from 'lodash-es'
  import FilterTable from '@/components/TableFilter.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import takeOrRejectOrder from './components/takeOrRejectOrder.vue'
  import submitFactory from './components/submitFactory.vue'
  import batchTakeOrderOrReject from './components/batchTakeOrderOrReject.vue'
  import deliverGoods from './components/deliverGoods.vue'
  import signForAndReject from './components/signForAndReject.vue'
  import submitToWarehouse from './components/submitToWarehouse.vue'
  import customOrderDetail from './components/customOrderDetail.vue'
  import batchSetPurchaseSaleman from './components/batchSetPurchaseSaleman.vue'
  import tag from './components/tag/tagList.vue'
  const route = useRouter()
  const Tag = ref()
  let tabList = ref([
    { label: '全部', key: '20,40,50,60,70,90,80,100,110,120,130' },
    { label: '待接单', num: '3', key: '20' },
    { label: '待下单', num: '3', key: '40' },
    { label: '待工厂接单', num: '3', key: '50' },
    { label: '工厂驳回', num: '3', key: '60' },
    { label: '生产中', num: '3', key: '70,90' },
    { label: '待验收', num: '3', key: '80' },
    { label: '待交货', num: '3', key: '100' },
    { label: '待仓库签收', num: '3', key: '110' },
    { label: '仓库拒收', num: '3', key: '120' },
    { label: '已完成', num: '3', key: '130' },
  ])

  let filterItem = ref([
    {
      type: 'input_keyword',
      key: 'customCodeList',
      keyItems: [
        { label: '定制单号', value: 'customCodeList' },
        { label: '平台订单号', value: 'platformOrderNumberList' },
      ],
      keyWidth: '100',
      value: ref(),
      placeholder: '请输入',
      label: '定制单号',
      width: 160,
      isMultiple: true,
    },
    {
      type: 'input_keyword',
      key: 'productSkuList',
      keyItems: [
        { label: 'SKU', value: 'productSkuList' },
        { label: 'MSKU', value: 'mskuList' },
        { label: 'ASIN', value: 'asinList' },
      ],
      keyWidth: '100',
      value: ref(),
      placeholder: '请输入',
      label: 'SKU',
      width: 160,
      isMultiple: true,
    },
    {
      key: 'customType',
      label: '定制类型',
      value: ref(),
      type: 'select',
      width: 140,
      optionItems: customType.map((e: any) => {
        return {
          label: e,
          value: e,
        }
      }),
    },

    {
      key: 'purchaserIdList',
      label: '采购员',
      value: ref(),
      type: 'select_multiple',
      width: 110,
      optionItems: [],
    },

    {
      type: 'input_search',
      key: 'companyName',
      keyWidth: '110',
      value: ref(),
      placeholder: '销售公司',
      width: 180,
    },

    {
      key: 'statusList',
      label: '状态',
      value: ref(),
      type: 'select',
      width: 110,
      optionItems: _.cloneDeep(tabList.value).map((e: any) => {
        e.value = e.key
        e.label = e.label
        return e
      }),
    },
    {
      type: 'input_search',
      key: 'salerName',
      keyWidth: '110',
      value: ref(),
      placeholder: '销售员',
      width: '100%',
    },

    {
      key: 'supplierIdList',
      label: '供应商',
      value: ref(),
      type: 'select_multiple',
      width: '100%',
      optionItems: [],
    },

    {
      type: 'keyword_date_range',
      key: 'gmtSubmitPurchase',
      keyItems: [
        { label: '提交时间', value: 'gmtSubmitPurchase' },
        { label: '接单时间', value: 'gmtPurchaseTake' },
        { label: '签收时间', value: 'gmtWarehouseReceive' },
      ],
      keyWidth: '110',
      label: '发布时间',
      value: ref(),
      width: 200,
    },
  ])
  let tableList = ref<Array<any>>([])
  let userList = ref<Array<any>>([])
  let ids = ref<Array<any>>([])
  let srcList = ref<Array<any>>([])
  let submitFactoryList = ref<Array<any>>([])
  let editShowTagList = ref<Array<any>>([])
  let info = ref<any>({})
  let checkAll = ref(false)
  let tableLoading = ref(false)
  let visible = ref(false)
  let showTakeOrRejectOrderModal = ref(false)
  let showSubmitToWarehouseModal = ref(false)
  let showSubmitFactoryModal = ref(false)
  let showBatchTakeOrderOrReject = ref(false)
  let showDeliverGoodsModal = ref(false)
  let showCustomOrderDetailModal = ref(false)
  let showBatchSetPurchaseSalemanModal = ref(false)
  let selectList = ref<Array<any>>([])
  let searchValue = ref<any>({})

  let activeTab = ref('20,40,50,60,70,90,80,100,110,120,130')

  let pageNation = ref({ total: 0, pageNum: 1, pageSize: 20 })
  const tabChange = () => {
    if (activeTab.value != '20,40,50,60,70,90,80,100,110,120,130') {
      filterItem.value[5].type = 'aaaaaa'
      searchValue.value.statusList = ''
    } else {
      filterItem.value[5].type = 'select'
    }
    pageNation.value.pageNum = 1
    getList()
  }

  const searchByVal = (info: any) => {
    searchValue.value = info
    pageNation.value.pageNum = 1
    getList()
  }

  const changePage = (val: number) => {
    pageNation.value.pageNum = val
    getList()
  }

  const sizeChange = (val: number) => {
    pageNation.value.pageNum = 1
    pageNation.value.pageSize = val
    getList()
  }

  const getList = async () => {
    let params: any = {
      ..._.cloneDeep(searchValue.value),
      statusList: activeTab.value.split(','),
      pageNum: pageNation.value.pageNum,
      pageSize: pageNation.value.pageSize,
    }

    if (searchValue.value.statusList) {
      params.statusList = searchValue.value.statusList.split(',')
    }

    if (params.salerIdList) {
      params.salerIdList = params.salerIdList.split(',')
    } else {
      delete params.salerIdList
    }

    for (const key in params) {
      if (['customCodeList', 'platformOrderNumberList', 'productSkuList', 'mskuList', 'asinList', 'purchaserIdList', 'supplierIdList'].indexOf(key) != -1) {
        params[key] ? (params[key] = params[key].split(',')) : delete params[key]
      }
    }

    if (params.startDate) {
      params.startDate = new Date(`${params.startDate} 00:00:00`).getTime()
      params.endDate = new Date(`${params.endDate} 23:59:59`).getTime()
    }

    tableLoading.value = true
    const res: any = await pageCustomOrderPurchase(params)
    getStatusCount()
    tableLoading.value = false
    if (res) {
      tableList.value = res?.data?.records
      pageNation.value.total = res?.data?.total
    }
    getTableInventory()
  }

  const getTableInventory = async () => {
    tableList.value.forEach(async (e) => {
      if (e?.supplierCloseCost?.semiWarehouseCode && e?.supplierCloseCost?.semiWarehouseCode !== '无需领料') {
        let params = {
          skus: e.product.productSku,
          warehouseCode: e.supplierCloseCost.semiWarehouseCode,
        }
        const res: any = await queryInventory(params)
        if (res) {
          let arr = res?.data
          e.SemiGoodsInventory = arr.reduce((acc: any, cur: any) => {
            return acc + cur.amtAvailable || 0
          }, 0)
          // e.SemiGoodsInventory = res?.data[0]?.amtAvailable || 0
        }
      }
    })
  }

  // 获取所有用户列表
  async function getUserList() {
    const res: any = await getOrganizesUser({
      pageNum: 1,
      pageSize: 1000,
    })
    userList.value = res?.data?.records || []
    filterItem.value[3].optionItems = userList.value?.map((el: any) => {
      return {
        label: el.userName,
        value: el.id,
      }
    })
  }

  const getPicList = (item: any) => {
    return item.customInfo?.customPicList || []
  }

  const showBigImg = (item: any) => {
    let arr = getPicList(item)
    srcList.value = arr.map((e: any) => e.url)
    visible.value = true
  }

  const filterStatus = (type: string) => {
    if (['70', '90'].includes(type)) {
      return '生产中'
    }

    let item = statusList.find((e: any) => e.code == type)
    return item ? item?.description : '当前状态不属于当前业务逻辑'
  }

  const getfittingName = (data: any) => {
    let arr = data?.customInfo?.chainList || []
    return arr.map((e: any) => e.fittingName).join(',')
  }

  const showModal = (showFlag: string, item: any) => {
    info.value = item
    ids.value = []
    selectList.value = []
    submitFactoryList.value = []
    switch (showFlag) {
      case 'showTakeOrRejectOrderModal':
        showTakeOrRejectOrderModal.value = true
        break
      case 'showSubmitFactoryModal':
        showSubmitFactoryModal.value = true
        submitFactoryList.value.push(item)
        break
      case 'showDeliverGoodsModal':
        showDeliverGoodsModal.value = true
        ids.value.push(item.id)
        break
      case 'showSubmitToWarehouseModal':
        showSubmitToWarehouseModal.value = true
        selectList.value.push(item)
        break
    }
  }

  const cancelTakeOrder = (data: any) => {
    Modal.info({
      title: '取消接单',
      content: '取消接单后，订单状态退回到待接单状态。是否继续？',
      titleAlign: 'start',
      cancelText: '取消',
      hideCancel: false,
      onOk: async () => {
        let params = {
          idList: [data.id],
        }
        const res: any = await batchRollbackToWaitAccept(params)
        if (res) {
          Message.success('取消接单成功')
          getList()
        }
      },
    })
  }
  const backToPendingOrder = (data: any) => {
    Modal.info({
      title: '撤回',
      content: '撤回订单后，订单状态退回到待下单状态。是否继续？',
      titleAlign: 'start',
      cancelText: '取消',
      hideCancel: false,
      onOk: async () => {
        let params = {
          idList: [data.id],
        }
        const res: any = await batchRollbackToTaked(params)
        if (res) {
          Message.success('撤回成功')
          ids.value = []
          getList()
        }
      },
    })
  }

  const isNoSupper = (data: any) => {
    let flag = true
    if (data?.supplierCompany?.companyId && data?.supplierCompany?.companyName) {
      flag = true
    } else {
      flag = false
    }
    return flag
  }

  const saveAndReset = () => {
    ids.value = []
    info.value = {}
    checkAll.value = false
    getList()
  }

  const btnHandleClickSubmitFactory = () => {
    if (!ids.value[0]) return Message.error('请选择要提交工厂的订单')
    submitFactoryList.value = []
    ids.value.forEach((e: any) => {
      let item = tableList.value.find((el: any) => el.id == e)
      if (item) submitFactoryList.value.push(item)
      showSubmitFactoryModal.value = true
    })
  }

  const batch = () => {
    if (!ids.value[0]) return Message.error('请选择要批量操作的订单')
    showBatchTakeOrderOrReject.value = true
  }

  const batchSign = () => {
    if (ids.value.length == 0) return Message.error('请选择要签收的订单')

    let arr: any = []
    ids.value.forEach((e: any) => {
      let item = tableList.value.find((el: any) => el.id == e)
      if (item) arr.push(item)
    })

    route.push({
      path: '/purchase/purchaseManagement/components/batchSigning',
      query: {
        list: JSON.stringify(arr),
      },
    })
  }

  const toDetail = (data: any) => {
    info.value = data
    showCustomOrderDetailModal.value = true
  }

  const batchSetPurchaseUser = () => {
    if (!ids.value[0]) return Message.error('请选择要设置操作员的订单')
    showBatchSetPurchaseSalemanModal.value = true
  }

  const onCheckAllChange = (val: boolean) => {
    ids.value = val ? tableList.value.map((item: any) => item.id) : []
  }

  const getStatusCount = async () => {
    let params: any = {
      ..._.cloneDeep(searchValue.value),
      pageNum: pageNation.value.pageNum,
      pageSize: pageNation.value.pageSize,
    }

    delete params.statusList
    delete params.status

    for (const key in params) {
      if (['customCodeList', 'salerIdList', 'platformOrderNumberList', 'productSkuList', 'mskuList', 'asinList', 'purchaserIdList', 'supplierIdList'].indexOf(key) != -1) {
        params[key] ? (params[key] = params[key].split(',')) : delete params[key]
      }
    }

    if (params.startDate) {
      params.startDate = new Date(`${params.startDate} 00:00:00`).getTime()
      params.endDate = new Date(`${params.endDate} 23:59:59`).getTime()
    }

    const res: any = await countCustomOrderPurchaseByStatus(params)

    tabList.value.forEach((e: any) => {
      e.num = 0
      let arr = e.key.split(',')
      arr.forEach((el: any) => {
        e.num += res.data[el] || 0
      })
    })
  }

  const print = () => {
    if (ids.value.length == 0) return Message.error('请选择要打印的订单')

    // let arr: any = []
    // ids.value.forEach((e: any) => {
    //   let item = tableList.value.find((el: any) => el.id == e)
    //   if (item) arr.push(item)
    // })

    sessionStorage.setItem('customOrderIds', ids.value.join(','))

    route.push({
      path: '/purchase/purchaseManagement/customOrderPrint',
    })
  }

  const setTag = (type: string, info?: any) => {
    if (type == 'mul' && !ids.value[0]) {
      return Message.error('请选择需要设置标签的任务')
    }
    if (type != 'mul') ids.value.push(info.id)
    editShowTagList.value = []
    tableList.value.forEach((item: any) => {
      if (ids.value.indexOf(item.id) > -1) {
        if (item.tagList) editShowTagList.value = [...editShowTagList.value, ...item.tagList]
      }
    })

    console.log(editShowTagList.value)

    Tag.value.visible = true
  }

  const getSupperList = async () => {
    const res: any = await findSupperList()
    let arr = res?.data || []
    filterItem.value[7].optionItems = arr.map((e) => {
      e.label = e.supplierName
      e.value = e.id
      return e
    })
  }

  const tagSave = () => {
    ids.value = []
    setTimeout(() => {
      getList()
    }, 1000)
  }

  onMounted(() => {
    getSupperList()
    getUserList()
    getList()
  })
</script>

<style lang="less" scoped>
  :deep(.arco-scrollbar) {
    height: 100%;
  }

  .custom-basic-info {
    .label {
      width: 80px;
      text-align: right;
    }
  }

  .tag-btn {
    border-radius: 4px;
    color: #165dff;
    border-color: #165dff !important;
  }

  .tag-container {
    width: 200px;
    padding: 5px 0;
    margin-left: 5px;
    .tag-item {
      font-size: 12px;
      padding: 2px 5px;
      border-radius: 10px;
      border: 1px slid #d3d3d3;
    }

    &:hover {
      .icon-tag {
        display: inline-block;
      }
    }
    .icon-tag {
      display: none;
    }
  }

  .task-con {
    height: 100%;
    .top-tab {
      background-color: white;
    }
    .table-bottom {
      height: calc(100vh - @menuAndTabHeight);
    }
  }

  .item-container {
    .item {
      width: 33.33%;
      min-width: 450px;
      padding: 4px;

      position: relative;
      .bill-con {
        border: 1px solid #dde2dd;
        box-shadow: 0 0 2px 1px #dde2dd;
        .fl-img {
          width: 200px;
          // height: 200px;
        }
        .fr-info {
          flex: 1;
          padding: 2px;
          font-size: 12px;
          .title-con {
            &:hover {
              .my-copy-class {
                display: inline-block;
              }
            }
            .my-copy-class {
              display: none;
            }
          }
        }
      }
    }
    .checkbox-con {
      position: absolute;
      top: 10px;
      right: 0;
    }
  }
</style>
